*{margin:0; padding: 0;}
ul{list-style: none;}
.wuyou-waiter{position: fixed; right: 0px; top:50%; margin-top: -90px; width: 60px; box-shadow: 0px 0px 20px rgba(0,0,0,.3); z-index: 999;}
.waiter-ul li{position: relative; height: 60px; line-height: 60px; border-bottom: 1px solid #fff;}
.waiter-ul li a{ position: absolute; left: 0; top: 0; z-index: 2; color: #fff; display: block; width: 60px; height: 60px; line-height: 60px; text-align: center; -webkit-transition:all 0.6s;-ms-transition:all 0.6s;-moz-transition:all 0.6s; text-decoration: none; font-size: 24px;}
.waiter-title{position: absolute; left: 0px; bottom: 1px; color: #fff; width: 80px; height: 40px; line-height: 40px; text-align: center;-webkit-transition:all 0.6s;-ms-transition:all 0.6s;-moz-transition:all 0.6s; background-color: #fff; box-shadow: 0px 0px 10px rgba(0,0,0,.3); z-index: 1; opacity: 0;}
.waiter-title:before{content: ''; display: block; width: 10px; height: 10px; position: absolute; right: -5px; top: 14px; background-color:#fff; transform:rotate(45deg);}
.waiter-ul li:hover .waiter-title{left: -88px; opacity: 1;}

.tel-title{position: absolute; left:0px; bottom: 1px; color: #fff; width: 120px; height: 40px; line-height: 40px; text-align: center;-webkit-transition:all 0.6s;-ms-transition:all 0.6s;-moz-transition:all 0.6s; background-color: #000; box-shadow: 0px 0px 10px rgba(0,0,0,.3); z-index: 1; opacity: 0;}
.waiter-ul li:hover .tel-title{left: -120px; opacity: 1;}
.qq-title{position: absolute; left:0px; bottom: 1px; color: #fff; width: 120px; height: 40px; line-height: 40px; text-align: center;-webkit-transition:all 0.6s;-ms-transition:all 0.6s;-moz-transition:all 0.6s; background-color: #fff; box-shadow: 0px 0px 10px rgba(0,0,0,.3); z-index: 1; opacity: 0;}
.waiter-ul li:hover .qq-title{left: -120px; opacity: 1;}

.weixin-title{position: absolute; left:0px; bottom: 1px; color: #fff; width:120px; height:120px; text-align: center;-webkit-transition:all 0.6s;-ms-transition:all 0.6s;-moz-transition:all 0.6s; background-color: #fff; box-shadow: 0px 0px 10px rgba(0,0,0,.3); z-index: 1; opacity: 0;}
.waiter-ul li:hover .weixin-title{left: -120px; opacity: 1;}

.waiter-ul li.wuyou-shop a{background-image: -webkit-linear-gradient(left, #f60, #ffb443);background-image: -moz-linear-gradient(left, #f60, #ffb443);background-image: -ms-linear-gradient(left, #f60, #ffb443);}
.waiter-ul li.wuyou-shop .waiter-title{background-color:#f60; }
.waiter-ul li.wuyou-shop .waiter-title:before{background-color:#f60; }

.waiter-ul li.wuyou-contact a{background-image: -webkit-linear-gradient(left, #00b7ee, #55d8ff);background-image: -moz-linear-gradient(left, #00b7ee, #55d8ff);background-image: -ms-linear-gradient(left, #00b7ee, #55d8ff);}
.waiter-ul li.wuyou-contact .waiter-title{background-color:#00b7ee; }
.waiter-ul li.wuyou-contact .waiter-title:before{background-color:#00b7ee; }

.waiter-ul li.wuyou-qq a{background-image: -webkit-linear-gradient(left, #0086ee, #52b3fd);background-image: -moz-linear-gradient(left, #0086ee, #52b3fd);background-image: -ms-linear-gradient(left, #0086ee, #52b3fd);}
.waiter-ul li.wuyou-qq .qq-title{background-color:#0086ee; }
.waiter-ul li.wuyou-qq .qq-title:before{background-color:#0086ee; }
.icon-qq { background:url(../img/qq.png) no-repeat !important; display:block;}

.icon-weixin { background:url(../img/weixin.png) no-repeat !important; display:block;}
.waiter-ul li.wuyou-weixin a{background-image: -webkit-linear-gradient(left, #89b84e, #9ce93c);background-image: -moz-linear-gradient(left, #89b84e, #9ce93c);background-image: -ms-linear-gradient(left, #89b84e, #9ce93c);}
.waiter-ul li.wuyou-weixin .weixin-title{background-color:#89b84e; }
.waiter-ul li.wuyou-weixin .weixin-title:before{background-color:#89b84e; }

.waiter-ul li.wuyou-tel a{background-image: -webkit-linear-gradient(left, #000, #000);background-image: -moz-linear-gradient(left, #000, #000);background-image: -ms-linear-gradient(left, #000, #000);}
.waiter-ul li.wuyou-tel .tel-title{background-color:#000; color:#fff;}
.waiter-ul li.wuyou-tel .tel-title:before{background-color:#000; }
.icon-tel { background:url(../img/tel.png) no-repeat center center #000 !important; display:block; background-color:#000;}

.waiter-ul li.wuyou-top a{background-image: -webkit-linear-gradient(left, #333, #666);background-image: -moz-linear-gradient(left, #333, #666);background-image: -ms-linear-gradient(left, #333, #666);}
.waiter-ul li.wuyou-top .waiter-title{background-color:#333; }
.waiter-ul li.wuyou-top .waiter-title:before{background-color:#333; }
@media only screen and (max-width: 768px){
	.wuyou-waiter{
		display: none;
	}
}